<template>
  <markdownRender v-model="markStr" />
  <button @click="send">发送</button>
</template>

<script setup>
import { ref } from "vue";
import markdownRender from "./MarkdownRenderer.vue";

const str = `
可以包含 **粗体** 和 *斜体*。
\`print()\`
\`\`\`javascript
// 这是一段代码示例
function helloWorld() {
  console.log('Hello, World!');
}
\`\`\`
 | Header 1 | Header 2 |
 | -------- | -------- |
 | Cell 1-1 | Cell 1-2 |
 | Cell 2-1 | Cell 2-2 |
\n
> Dorothy followed her through many of the beautiful rooms in her castle.
\n
1. First item
2. Second item
3. Third item
4. Fourth item
`;

const markStr = ref("");

const send = () => {
  let index = 0;
  const interval = setInterval(() => {
    markStr.value += str[index];
    index++;
    // 如果已经追加完整个字符串，则清除定时器
    if (index === str.length) {
      clearInterval(interval);
    }
  }, 50); // 可调整延迟时间来控制追加速度
};
</script>

<style>
</style>